<template>
  <div>
      <van-nav-bar @click-left="$router.go(-1)" :title="title" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
      <div class="tic_list">
        <div class="tic_one" v-for="item in ticketList" :key="item.trainumber">
          <div class="tic_top">
            <div>
              <div>{{item.departtime}}</div>
              <p>{{item.departstation}}</p>
            </div>
            <div>
              <div>{{item.runtime}}</div>
              <p>{{item.trainumber}}</p>
            </div>
             <div>
              <div>{{item.arrivetime}}</div>
              <p>{{item.arrivestation}}</p>
            </div>
             <div>
              <div>￥{{item.ticket_info[0].seatprice}}</div>
              <p>{{item.traintype}}</p>
            </div>
          </div>
           <div class="tic_bottom">
            <div v-for="titem in item.ticket_info" :key="titem.seatname">
              <div>{{titem.seatname}}</div>
              <p>{{titem.bookable}}</p>
            </div>
          
        </div> 
        </div>
       
      </div>
  </div>
</template>
<script setup>
  import {getTickets} from '../../api/ticket'
  import {useRoute} from 'vue-router'
  import {ref} from 'vue'

  let route=useRoute();
    let title=ref(route.query.from+"->"+route.query.to)
  let ticketList=ref([])
  // 调用获取车票列表的接口
  let getTick=async ()=>{
    let res=await getTickets({
      to:route.query.to,
      from:route.query.from,
      time:route.query.time
    })
    console.log(res,"---------------")
    ticketList.value=res.data.data;//存储车票数据
  }
  getTick();

</script>
<style scoped>
.tic_one{
  width:100%;
  padding:10px 15px;
  box-sizing: border-box;
  height:200px;
  background:skyblue;
  margin-top:10px;
}
 .tic_top{
    height:100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size:20px;
    font-weight:bold;
    margin-top:20px;
    overflow:hidden;
  }
.tic_bottom{
     height:50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size:15px;
   
  }
    .tic_bottom  div{
       display: flex;
       align-items: center;
    }
</style> 